CSS Cursor Pointer
What is Cursor in CSS?
We use customized cursors every day. This happens when the cursor
changes, like turning into a hand when you hover over a button or into a
text cursor when you hover over text.
However, cursors can also be used to offer our users a variety of other
creative options.
Before creating custom cursors, it's important to know that CSS already
provides default cursors for many common actions.
These cursors offer specific actions based on where you're hovering. For
example, they can indicate when to click a link, drag and drop items, zoom
in or out, and more.
Use the CSS cursor property to specify the type of cursor you want.
CSS Cursor Property
We can use the CSS cursor property to define the type of cursor that
should be displayed to the user.
A practical use of this feature is using images as submit buttons on
forms. Normally, when a cursor hovers over a link, it changes to a hand
instead of a pointer. However, the submit button on a form doesn't cause
this change. By changing the cursor, it visually indicates that the image
is clickable when someone hovers over it as a submit button.
This property is defined by one or more <url> values separated by
commas, followed by a required keyword value. Each <url> points to
an image file.
Syntax
cursor:value;
Property Values
Auto: The default setting places
the cursor automatically.
Alias: Displays a special cursor
to indicate creating or linking.
All-scroll: Indicates that
scrolling is possible in any direction.
Cell: Shows that a cell or a group
of cells is selected.
Context-menu: Indicates the
presence of a context menu.
Col-resize: Allows horizontal
resizing of a column.
Copy: Shows that an item can be
copied.
Crosshair: Displays the cursor as
a crosshair.
Default: The standard default
cursor.
E-resize: Indicates that the right
edge of a box can be moved.
Ew-resize: Shows a cursor that
resizes both left and right.
Help: Indicates that help or
assistance is available.
Move: Shows that an item can be
moved.
n-resize: Indicates that the top
edge of a box can be moved.
Ne-resize: Allows the top-right
edge of a box to be moved.
Nesw-resize: Shows a cursor for
diagonal resizing.
Ns-resize: Allows resizing both up
and down.
Nw-resize: Indicates that the
top-left edge of a box can be moved.
Nwse-resize: Shows a cursor for
diagonal resizing in the opposite direction.
No-drop: Indicates that an item
cannot be dropped in that area.
None: Hides the cursor
entirely.
Not-allowed: Indicates that the
action is not permitted.
Pointer: Shows the cursor as a
pointer, often for links.
Progress: Indicates that a process
is ongoing.
Row-resize: Allows vertical
resizing of a row.
S-resize: Indicates that the
bottom edge of a box can be moved.
Se-resize: Allows the bottom-right
edge of a box to be moved.
Sw-resize: Allows the bottom-left
edge of a box to be moved.
Text: Indicates text that can be
selected.
URL: Specifies custom cursor URLs,
ending with a generic fallback cursor.
Vertical-text: Indicates a
possible vertical text selection.
W-resize: Indicates that the left
edge of a box can be moved.
Example
This example demonstrates how to use the cursor property. The cursor is
set to "wait," indicating that the program is busy.
<!DOCTYPE
html>
<html>
<head>
<title>CSS Cursor
Property</title>
<style>
.ak{
cursor:
wait;
}
h1 {
color:
blue;
}
</style>
</head>
<body>
<center>
<h1>Welcome to the
page</h1>
<p>Move the mouse over the
text to change the cursor.</p>
<p class="ak">Wait until the
next suggestion.</p>
</center>
</body>
</html>
Output
How can CSS bring the cursor to the hand when a user hovers over a list item?
To change the cursor when a user hovers over a list of items, you can use
CSS properties. Start by creating the list with HTML <ul> and
<li> tags. Then, apply the cursor: grab property in your CSS to
display a hand cursor when hovering over the list.
Syntax
element:hover {
cursor:
pointer/grab;
}
Example
<!DOCTYPE
html>
<html>
<head>
<title>Make Our Cursor a
Hand</title>
<style>
body {
width:
90%;
}
h1 {
color:
blue;
text-align:
center;
}
li:hover {
cursor:
grab;
}
</style>
</head>
<body>
<h1>Welcome to the Course
List</h1>
<div class="ak">Course
Lists:</div>
<ul>
<li>BCA</li>
<li>B.Com</li>
<li>IT</li>
<li>MECH</li>
<li>CIVIL</li>
<li>AI</li>
<li>EEE</li>
</ul>
</body>
</html>
Output
How can we alter the color of our cursor using CSS?
In this example, we'll use CSS to change the cursor color in input
fields. The `caret-color` property allows us to modify the color of the
cursor in textareas, input fields, and other editable areas.
Syntax
caret-color:
auto / color;
Parameters
Auto: This is the default value,
which uses the browser's default color for the caret.
Color: This value lets you specify the
caret's color. You can use any color value, such as RGB, hex, or named
colors.
Example
<!DOCTYPE
html>
<html lang="en">
<head>
<title>Changing the Color of
the Cursor Using CSS</title>
<style>
body {
text-align:
center;
}
/* Change the cursor color to red */
input[type="text"]
{
caret-color:
red;
}
/* Change the cursor color to blue */
input[type="email"]
{
caret-color:
blue;
}
</style>
</head>
<body>
<h1 style="color:
black;">Welcome to the Page </h1>
<h3> Changing the Color of the
Cursor Using CSS</h3>
<form action="">
<label for="name">Enter
Your Name</label>
<input type="text"
name="name" id="name">
<br><br>
<label for="mail">Enter
Your Email</label>
<input type="email"
name="mail" id="mail">
</form>
</body>
</html>
Output
How can we use CSS to change the cursor style in a browser?
In CSS, the cursor property determines the type of mouse cursor that
appears when hovering over an element. By default, the cursor is set to a
pointer. You can customize it using CSS if needed. The default value of the
cursor property is auto, so specifying auto is optional since it is the
default setting.
Syntax
cursor:value;
Property Value: This specifies the value for the cursor property.
Example
To display the cursor as a crosshair, set the cursor property to
crosshair.
<!DOCTYPE
html>
<html>
<head>
<style>
.cursor {
cursor:
crosshair;
}
</style>
</head>
<body style="text-align: left;">
<h1 style="color: red;"> Welcome
to the Page</h1>
<p class="cursor">Login
Credentials</p>
</body>
</html>
Output
We can use the CSS cursor property to define the type of cursor shown to
users. One practical use is setting images as submit buttons in forms. By
default, the cursor changes to a hand when hovering over a link.
